<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="head">
      <div class="head-left">
        <div>
          <span class="FrameName">L-Frame</span>
        </div>
      </div>
      <div class="head-right">
        <el-menu
          default-active="1"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="处理中心" @click="open('处理中心')">处理中心</el-menu-item>
          <el-submenu index="我的工作台">
            <template slot="title">我的工作台</template>
            <el-menu-item index="选项1">选项1</el-menu-item>
            <el-menu-item index="选项2">选项2</el-menu-item>
            <el-menu-item index="选项3">选项3</el-menu-item>
            <el-submenu index="选项4">
              <template slot="title">选项4</template>
              <el-menu-item index="选项4-选项1">选项1</el-menu-item>
              <el-menu-item index="选项4-选项2">选项2</el-menu-item>
              <el-menu-item index="选项4-选项3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="消息中心" @click="open('消息中心')">消息中心</el-menu-item>
          <el-menu-item index="订单管理" @click="open('订单管理')">订单管理</el-menu-item>
          <el-submenu index="用户">
            <template slot="title">
              <img class="head-right-log-img" src="./assets/images/default_handsome.jpg" />
            </template>
            <el-menu-item index="个人信息" @click="dialogTableVisible = true">个人信息</el-menu-item>
            <el-menu-item index="切换账户" @click="siwtchUser()">切换账户</el-menu-item>
            <el-menu-item index="退出" @click="signout()">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogTableVisible">
      <el-table :data="userInfo">
        <el-table-column property="username" label="姓名" width="150"></el-table-column>
        <el-table-column property="skill" label="技能" width="200"></el-table-column>
        <el-table-column property="description" label="描述"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 侧边导航栏 -->
    <div class="side">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#F5F5F5"
        text-color="#333333"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
          <el-menu-item index="1-3">选项3</el-menu-item>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 中间内容 -->
    <div class="middle">
      <div class="centent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: [
        {
          username: "LYC",
          skill: "JavaScript",
          description: "天生我材必有用"
        }
      ],
      dialogTableVisible: false
    };
  },
  methods: {
    open(key) {
      this.$notify({
        title: "提示",
        message: "监听到 " + key + " 触发",
        type: "success",
        showClose: true,
        duration: 4000
      });
    },
    siwtchUser() {
      this.$message({
        message: "切换用户",
        type: "warning"
      });
    },
    signout() {
      this.$confirm("是否退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "确定退出触发!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出"
          });
        });
    }
  }
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 61px;
  position: fixed;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 4px 0px;
  /* flex布局 */
  display: flex;
  /* 左右两边布局 */
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  background-color: #545c64;
  padding: 0px 15px;
}
.head-left {
  display: flex;
  align-items: center;
  height: 61px;
  line-height: 61px;
}
.FrameName {
  font-size: 20px;
  color: #fff;
}
.head-right {
  display: flex;
  align-items: center;
  height: 61px;
  box-sizing: border-box;
}
.head-right-log-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.el-menu {
  border-bottom: none;
  border-right: none;
}
.side {
  position: fixed;
  top: 61px;
  left: 0;
  bottom: 0;
  display: block;
  background-color: rgb(245, 245, 245);
  width: 210px;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
}
.middle {
  overflow: hidden;
}
.centent {
  margin-top: 80px;
  margin-left: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
</style>